/**
 * form 类
 *
 * 主要用于表格头部筛选布局
 * @create 2018-08-17 15:05:40
 */

@mixin itemWidth ($textNum, $fontSize: 14, $inputMinWidth: 100, $inputMaxWidth: 300) {
    $width: ($textNum + 1) * $fontSize + px;
    $padding: 32;

    @include pxAndLh(14);
    min-width: ($textNum + 1) * $fontSize + $inputMinWidth + $padding + px;
    max-width: ($textNum + 1) * $fontSize + $inputMaxWidth + $padding + px;
    width: calc(30% + #{$width});

    .filter-item {
        margin-bottom: 32px;
        color: $text-color-black-65;
    }
    .filter-item-key {
        width: $width;
        text-align: right;
    }
}

.filter {
    display: flex;

    &-item {
        display: flex;
        align-items: center;

        &_1 {
            @include itemWidth(1);
        }
        &_2 {
            @include itemWidth(2);
        }
        &_3 {
            @include itemWidth(3);
        }
        &_4 {
            @include itemWidth(4);
        }
        &_5 {
            @include itemWidth(5);
        }
        &_6 {
            @include itemWidth(6);
        }

        &-val {
            flex: 1;
            padding-right: 32px;
        }
    }


}
